{% extends '__base__.html' %}
{% load staticfiles %}

{% block content %}

    {#        表格有数据时展示#}
    <div class="app-title">
        {#            页面简介区域#}
        <div>
            <h1><i class="fa fa-th-list"></i>{{ jenkinsbuildhistory.job.name }}-历史记录</h1>
            {% if job_history %}
                <p>{{ jenkinsbuildhistory.job.name }}-历史记录</p>
            {% else %}
                <p>No history are available.</p>
            {% endif %}
        </div>
        {#            面包屑区域#}
        <ul class="app-breadcrumb breadcrumb side">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">发布管理</li>
            <li class="breadcrumb-item"><a href="{% url 'jenkins:jenkins_job_list' %}">Jenkins任务管理</a></li>
            <li class="breadcrumb-item active"><a href="#">Job历史记录</a></li>
        </ul>
    </div>
    {#        操作结果提示栏区域#}
    <div class="row">
        <div class="col-lg-12">
            <div class="bs-component">
                <div class="alert alert-dismissible" id="notice" style="display: none;">
                    <button class="close" type="button" data-dismiss="alert">×</button>
                    <h4></h4>
                    <p><a class="alert-link" href="#"></a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    {% if job_history %}
        {#        表格区域#}
        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    {#                    表格数据区域#}
                    <div class="tile-body table-responsive" id="table">
                        <table class="table table-hover table-bordered" id="sampleTable"
                               style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                            <thead>
                            <tr>
                                <th>构建版本号</th>
                                <th>构建开始时间</th>
                                <th>构建结束时间</th>
                                <th>持续时间</th>
                                <th>结果</th>
                                <th>console日志</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for h in job_history %}
                                <tr>
                                    <td>#{{ h.build_no }}</td>
                                    <td>{{ h.build_start_time|date:"Y-m-d H:i:s" }}</td>
                                    <td>{{ h.build_finish_time|date:"Y-m-d H:i:s" }}</td>
                                    <td>{{ h.get_build_last_time }}</td>
                                    <td class="{% if h.result == 1 %}text-success{% else %}text-danger{% endif %}">{{ h.get_result_display }}</td>
                                    <td>
                                        {% if h.result == 0 %}
                                            <button class="btn btn-sm btn-primary" id="console"
                                                    onclick='console("{{ h.id }}", "{{ h.build_no }}")'>console
                                            </button>
                                        {% endif %}
                                    </td>
                                    <input style="display: none;" id="console-{{ h.id }}" value="{{ h.console }}">
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    <div class="tile-body">还没有历史记录</div>
                </div>
            </div>
        </div>
    {% endif %}

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        <span id="console-title"></span><span>-console</span>
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                </div>
                <div class="modal-body">
                    <p id="console-content"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

{% endblock %}

{% block custom_static %}

    <!-- Data table plugin-->
    <script type="text/javascript" src="{% static 'js/plugins/jquery.dataTables.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/dataTables.bootstrap.min.js' %}"></script>
    <script type="text/javascript">
        $('#sampleTable').DataTable({
            "order": [[1, "desc"]]
        });
    </script>

    <!--history-->
    <script type="text/javascript">
        function console(history_id, build_no, console) {
            var console = $('#console-' + history_id).val();
            //alert(console);
            $('#console-title').text('#' + build_no);
            $('#console-content').text(console);
            $('#myModal').modal('show');
        }
    </script>

{% endblock %}